<template lang="jade">
    .line-item 
        span.label(:style="{width:width+'px'}",:class="{'column':$slots.desc}")
          i(v-if="!!request",class="request") * 
          .label-title(:class="{'strong':this.strong}")
            | {{label}}
            i(v-if="!!icon",:class="iconName")
          slot(name="desc") 
        span.value {{value}}
            slot
</template>
<script>
export default {
  name: 'elLineItem',
  props: {
    label: {
      type: String,
      default: ''
    },
    request: {
      type: Boolean
    },
    icon: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    },
    strong: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  methods: {},
  watch: {},
  computed: {
    iconName: function () {
      switch (this.icon) {
        case 'warning':
          return `el-icon-warning color__error`
        case 'success':
          return `el-icon-success color__success`
        default:
          return `fa fa-${this.icon}`
      }
    }
  }
}
</script>
<style lang="scss">
.line-item {
  .request {
    color: #f56c6c;
    padding-right: 2px;
  }
  .strong{
    color: #f56c6c;
  }
  .label-title i {
    padding-left: 5px;
  }
  .column {
    flex-direction: column;
    .label-title {
      display: block;
      width: 100%;
      i {
        padding-left: 1em;
      }
    }
    div {
      width: 100%;
    }
    .desc {
      display: block;
      width: 100%;
    }
  }
}
</style>
